<template>
  <OrderHeaderList ref="OrderHeaderListRef" :orderlist="infoData" />
  <el-card shadow="never">
    <el-tabs v-model="activeName" class="tabs_box">
      <el-tab-pane :label="infoData.product ? `关联产品（${infoData.product}）` : '关联产品'" name="first">
        <ManageProducts :orderlist="infoData" />
      </el-tab-pane>
      <el-tab-pane :label="auditData.length ? `历史审核（${auditData.length}）` : '历史审核'" name="second">
        <HistoricalReview :auditData="auditData" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="tsx">
  import OrderHeaderList from './components/OrderHeaderList.vue'
  import ManageProducts from './components/ManageProducts.vue'
  import HistoricalReview from './components/HistoricalReview.vue'
  import { reactive, ref, onMounted, computed, watch } from 'vue'
  import { getOrderInfo, getOrderInfoAudit } from '@/api/salesleads/ordermanagement/orderlist'
  import { useRoute } from 'vue-router'
  const activeName = ref('first')
  const OrderHeaderListRef = ref<any>(null)
  const route = useRoute()
  const infoData = ref<any>({
    product: ''
  })
  // 获取订单详情数据
  const getData = () => {
    getOrderInfo({ id: route.query.id }).then((res: any) => {
      console.log('详情数据', res)
      infoData.value = res
      OrderHeaderListRef.value.onState(res)
    })
  }
  // 获取历史审核数据
  const auditData = ref<any>([])
  const getAudit = () => {
    getOrderInfoAudit({ order_id: route.query.id }).then((res: any) => {
      console.log('历史审核数据', res)
      auditData.value = res.data
    })
  }
  onMounted(() => {
    getData()
    getAudit()
  })
</script>

<style lang="scss" scoped>
  .tabs_box {
    :deep(.el-tabs__item) {
      color: #969696;
    }
    :deep(.is-active) {
      font-weight: 600;
      color: #ff6b00;
    }
  }
</style>
